<!--
盒子模型（Box Model）
    网页布局的三大核心：盒子、浮动、定位。
    布局核心：摆放CSS盒子。
    -----------
    盒子模型 = 内容 + 内边距 + 边框
    box宽度 = width（content） + padding + border
    -----------
    控制台--》已计算（可以看到盒子模型）

是否会撑大盒子？即：是否影响盒子大小、影响盒子的宽度、高度？
    border
        1）会撑大
        2）要保持盒子大小不变，在测量盒子时不带边框即可。
    padding
        1）会撑大
        2）要保持盒子大小不变，在设置宽、高时，记得减去内边距的大小。
        3）不会撑大盒子的特殊情况：不设置宽/高，只设置padding时。

注意：
    影响盒子宽高的只是（width、padding、border），不包括（margin），
    因为外边距是指盒子之间的间隙，不属于盒子的一部分，只是他也会影响布局罢了。
    （自己联想现实生活中的箱子）
-->
<style>
  div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 20px solid red;
    margin: 30px;
    background-color: blue;
  }
</style>

<div></div>
